<template>
  <div>
    <h4>
      {{nums+1}}# {{list[nums].title}}
      <!-- 1# 测试题目 -->
      {{list[nums].answers}}
      <i class="el-icon-question" @click="drawer = true"></i>
    </h4>
    <el-checkbox-group v-model="checkList">
      <el-checkbox
        v-for="(item,index) in list[nums].options"
        :key="index"
        :label="item.index"
      >{{item.index+')'+item.value}}</el-checkbox>
    </el-checkbox-group>
    <el-button-group>
      <el-button
        size="small"
        type="success"
        icon="el-icon-arrow-left"
        style="margin-right:15px"
        :disabled="nums==0"
        @click="listUpdtae('-')"
      >上一题</el-button>
      <el-button
        size="small"
        type="success"
        icon="el-icon-arrow-right"
        :disabled="nums==19"
        @click="listUpdtae('+')"
      >下一题</el-button>
    </el-button-group>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <div style="margin:20px">{{list[nums].tips}}</div>
    </el-drawer>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      checkList: [],
      drawer: false
    };
  },
  methods: {
    ...mapMutations("questions", ["SET_NUM"]),
    async listUpdtae(val) {
      // /////////////////////////////
      this.list[this.nums] = {
        ...this.list[this.nums],
        isanswers: JSON.stringify(this.checkList),
        isChecked:
          this.list[this.nums].answers === JSON.stringify(this.checkList)
      };
      // ////////////////////////////////
      // console.log(this.list[this.nums]);
      if (val == "+") {
        let num = this.nums + 1;
        this.SET_NUM(num);
        // this.nums++;
      } else {
        let num = this.nums - 1;
        this.SET_NUM(num);
        // this.nums--;
      }
      // /////////////////////////////////
      this.checkList = [];
      this.checkList =
        (this.list[this.nums].isanswers &&
          JSON.parse(this.list[this.nums].isanswers)) ||
        [];
      this.$emit("update", this.list);
      // console.log(this.$parent.checkedList);
    }
  },
  computed: {
    ...mapState("questions", ["num"]),
    nums() {
      return this.num;
    },
    list() {
      return this.$parent.app.data;
    }
  }
};
</script>

<style scoped>
.el-checkbox {
  display: block;
  margin-bottom: 10px;
  width: 100px;
}

.el-icon-question {
  cursor: pointer;
  margin-left: 5px;
}
</style>